<template>
  <div class="app-container">
    <!-- <a-row :gutter="24"> -->
    <a-card
      :bordered="false"
      class="box-card"
      title="上传安装包资源"
      headStyle="text-align: center;font-weight: bold;font-size: 20px;border-bottom: none"
    >
      <a-form
        layout="horizontal"
        :model="formState"
        ref="formRef"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <!-- <a-col :span="3" :xs="24"> -->
        <a-form-item label="上传安装包">
          <div class="upload-container">
            <a-upload
              v-model:fileList="formState.uploadApk"
              list-type="picture-card"
              :max-count="1"
            >
              <div v-if="formState.uploadApk.length < 1">
                <PlusOutlined
                  :style="{
                    fontSize: '32px',
                    color: 'rgba(222, 222, 222, 1)',
                  }"
                />
                <div class="margintop18">上传apk</div>
              </div>
            </a-upload>
            <div class="upload-instructions">
              仅支持上传1个apk包（32位、64位或32位/64位兼容包）；
            </div>
          </div>
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="3" :xs="24"> -->
        <a-form-item
          label="视频标题"
          name="title"
          :rules="[
            {
              required: true,
              message: '请输入视频标题',
              trigger: 'change',
            },
            {
              min: 2,
              max: 20,
              message: 'Length should be 2 to 20',
              trigger: 'blur',
            },
          ]"
        >
          <a-input
            v-model:value="formState.title"
            allow-clear
            show-count
            :maxlength="20"
            placeholder="请输入20字以内的视频标题"
            style="width: 700px"
          />
        </a-form-item>
        <!-- </a-col> -->
        <!-- <a-col :span="12" :xs="24"> -->
        <a-form-item label="封面图">
          <div class="upload-container">
            <div class="ant-upload w210px">
              <a-upload
                v-model:fileList="formState.banner"
                accept=".png,.jpg"
                list-type="picture-card"
                :max-count="1"
              >
                <div v-if="formState.banner.length < 1" class="w210px">
                  <PlusOutlined
                    :style="{
                      fontSize: '32px',
                      color: 'rgba(222, 222, 222, 1)',
                    }"
                  />
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
            </div>
            <div class="upload-instructions">
              ①
              请上传1张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片<br />
              ② 支持JPG、PNG格式
            </div>
          </div>
        </a-form-item>
        <!-- </a-col> -->
        <a-col :span="3" :xs="24">
          <a-form-item label="游戏视屏">
            <div class="upload-container">
              <a-upload
                v-model:fileList="formState.videoScreen"
                list-type="picture-card"
                :multiple="true"
                :max-count="5"
              >
                <div v-if="formState.videoScreen.length < 5">
                  <PlusOutlined
                    :style="{
                      fontSize: '32px',
                      color: 'rgba(222, 222, 222, 1)',
                    }"
                  />
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
              <div class="upload-instructions">
                ①
                请上传4~5张，建议尺寸1920×1080px，最小尺寸370X180像素，单张不超过1M的图片<br />
                ② 支持JPG、PNG格式
              </div>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="3" :xs="24">
          <a-form-item label="电子版授权证书（选填）">
            <div class="upload-container">
              <a-upload
                v-model:fileList="formState.certificates"
                list-type="picture-card"
              >
                <div v-if="formState.certificates.length < 1">
                  <PlusOutlined
                    :style="{
                      fontSize: '32px',
                      color: 'rgba(222, 222, 222, 1)',
                    }"
                  />
                  <div class="margintop18">点击或拖拽上传</div>
                </div>
              </a-upload>
              <div class="upload-instructions">
                若应用已申请电子版权认证，并获得版权证书，可在此上传版权证书。
              </div>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="3" :xs="24">
          <a-form-item label="资源证明">
            <div class="upload-container">
              <!-- <a-upload 
                :before-upload="handleBeforeUpload"
                :on-change="handleFileChange"
                :file-list="fileList"
                accept=".jpeg,.png,.jpg,.bmp,.gif"
                v-model:fileList="formState.proof"
                :multiple="true" list-type="picture-card" :max-count="5">
                <div v-if="formState.proof.length <5">
                  <PlusOutlined :style="{fontSize: '32px', color: 'rgba(222, 222, 222, 1)'}"/>
                  <div class="margintop18" >点击或者拖拽上传</div>
                </div>
              </a-upload> -->
              <a-upload
                :before-upload="handleBeforeUpload"
                :on-change="handleFileChange"
                :file-list="fileList"
                accept=".jpeg,.png,.jpg,.bmp,.gif"
                v-model:fileList="formState.proof"
                :multiple="true"
                list-type="picture-card"
                :max-count="5"
              >
                <div v-if="formState.proof.length < 5">
                  <PlusOutlined
                    :style="{
                      fontSize: '32px',
                      color: 'rgba(222, 222, 222, 1)',
                    }"
                  />
                  <div class="margintop18">点击或者拖拽上传</div>
                </div>
                <!-- <template #extra>
                  <div v-if="formState.proof.length < 5">
                    <a-icon type="plus" :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }" />
                    <div class="margintop18">点击或者拖拽上传</div>
                  </div>
                </template> -->
              </a-upload>
              <div class="upload-instructions">
                (支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br />
                ① 请提供软件著作权扫描件，快速申请软件著作权；<br />
                ② 若未申请软件著作权，请下载开发者声明，填写后提交扫描件；<br />
                ③ 所有文件上传仅接受JPEG/PNG格式。<br />
                (若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)
              </div>
              <!-- <i class="fr" slot="extra">(支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br>① 请提供软件著作权扫描件，快速申请软件著作权；<br>② 若未申请软件著作权，请下载开发者声明，填写后提交扫描件；<br>③ 所有文件上传仅接受JPEG/PNG格式。<br>(若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)</i>  -->
              <!-- <i class="fr fr1">(支持批量上传文件，文件格式不限，最多只能上传 5 份文件)<br>① 请提供软件著作权扫描件，快速申请软件著作权；<br>② 若未申请软件著作权，请下载开发者声明，填写后提交扫描件；<br>③ 所有文件上传仅接受JPEG/PNG格式。<br>(若设计到新闻、股票、医疗、彩票、银行业务等还需要提供相应版权证明)</i> -->
              <!-- </a-form-item> -->
              <!-- <a-form-item
              label="资源证明"
              name="resourceProof"
              :rules="[{ required: true, message: '请上传资源证明文件' }]"
            >
              <a-upload
                :before-upload="handleBeforeUpload"
                :on-change="handleFileChange"
                :file-list="fileList"
                :multiple="true"
                list-type="picture-card"
                accept=".jpeg,.png,.jpg,.bmp,.gif"
              >
                <a-button> 
                  <a-icon type="upload" /> 点击或拖拽上传 
                </a-button> 
              </a-upload>
             <div slot="extra">支持批量上传文件，文件格式不限，最多只能上传5份文件</div> -->
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="3" :xs="24">
          <a-form-item
            label="隐私政策"
            name="type"
            :rules="[
              {
                required: true,
                message: '请选择隐私政策',
                trigger: 'change',
              },
            ]"
          >
            <a-radio-group v-model:value="formState.type">
              <a-radio value="1"
                >输入URL
                <a-input
                  v-if="formState.type == '1'"
                  v-model:value="formState.url"
                  placeholder="请输入URL"
                  style="max-width: 190px"
                  allow-clear
              /></a-radio>
              <a-radio value="2"
                >输入文本内容
                <a-input
                  v-if="formState.type == '2'"
                  v-model:value="formState.txt"
                  placeholder="请输入文本内容"
                  style="max-width: 190px; margin-right: 14px"
                  allow-clear
              /></a-radio>
            </a-radio-group>
            <a-space class="icons" @click="views">
              <a-popover title="Title">
                <template #content>
                  <p>Content</p>
                  <p>Content</p>
                </template>
                <QuestionCircleOutlined />
              </a-popover>
              <i style="color: #4cc87e; font-style: normal">查看规范</i>
            </a-space>
          </a-form-item>
        </a-col>
        <a-col :span="3" :xs="24">
          <a-form-item
            label="发布类型"
            name="resource"
            :rules="[
              {
                required: true,
                message: '请选择发布类型',
                trigger: 'change',
              },
            ]"
          >
            <a-radio-group v-model:value="formState.resource">
              <a-radio value="1">审核通过后立即发布 </a-radio>
              <a-radio value="2"
                >定时发布
                <a-time-picker
                  v-if="formState.resource == '2'"
                  v-model:value="formState.date1"
              /></a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="3" :xs="24">
          <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
            <a-button
              htmlType="submit"
              style="
                margin-right: 16px;
                background-color: rgba(76, 200, 126, 1);
              "
              type="primary"
              @click="onSave"
              >保存并提交</a-button
            >
            <a-button style="margin-left: 8px" @click="resetForm"
              >取消保存</a-button
            >
          </a-form-item>
        </a-col>
      </a-form>
    </a-card>
    <!-- </a-row> -->
  </div>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue'
import {
  // SearchOutlined,
  QuestionCircleOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue'
const labelCol = {
  style: {
    width: '180px',
  },
}
const wrapperCol = {
  span: 24,
}

const formRef = ref()
const formState = reactive({
  uploadApk: [],
  title: '',
  banner: [],
  videoScreen: [],
  certificates: [],
  proof: [],

  type: '',
  url: '',
  txt: '',
  resource: '',
  date1: '',
})
// const rules = {
//   title: [
//     {
//       required: true,
//       message: 'Length should be 2 to 20',
//       trigger: 'change',
//     },
//     {
//       min: 2,
//       max: 20,
//       message: 'Length should be 2 to 20',
//       trigger: 'blur',
//     },
//   ],
//   type: [
//     {
//       required: true,
//       message: 'Please select activity url',
//       trigger: 'change',
//     },
//   ],
// }

// 资质证明
const fileList = ref([])

const handleBeforeUpload = file => {
  const isAllowedType = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isAllowedType) {
    console.error('所有文件上传仅接受JPEG/PNG格式!')
    return false
  }
  return isAllowedType
}

const handleFileChange = info => {
  let newFileList = info.fileList
  if (newFileList.length > 5) {
    console.error('最多只能上传5份文件!')
    newFileList = newFileList.slice(0, 5)
  }
  fileList.value = newFileList
}

const onSave = values => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formState, toRaw(formState))
    })
    .catch(e => {
      console.log('error', e)
    })
  console.log(formState, 1111)
  console.log('Success:', values)
}
const resetForm = () => {
  formRef.value.resetFields()
  formState.type = ''
  formState.date1 = ''
  formState.txt = ''
}
const views = () => {
  console.log('view', 1111)
}
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  // padding: 15px;
  // padding: 0 14px;
  // background: #ececec;
}

.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  // border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}
.upload-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
:deep(.ant-upload-wrapper.ant-upload-picture-card-wrapper) {
  width: auto;
}
.upload-instructions {
  // flex: 1;
  margin-left: 15px;
  font-size: 12px;
  color: #888;
}
.fr {
  display: block;
  // float: left;
  margin-top: -40px;
  margin-left: 140px;
  // width: 400px;
  width: 100%;
  height: 40px;
  white-space: pre-wrap;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #969696;
  line-height: 20px;
  text-align: left;
}
.fr1 {
  margin-top: 0px !important;
}
.margin24 {
  margin-right: 24px;
}
.margintop18 {
  margin-top: 18px;
  font-weight: 400;
  font-size: 12px;
  color: #cccccc;
  line-height: 20px;
  text-align: left;
}
.icons {
  width: 80px;
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.footer_content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
